<!-- 分类 -->
<template>
    <div id="ctg">
        <!-- 搜索框布局 -->
       <div class="ctgSearch">
           &nbsp;&nbsp;<i class="fa fa-search"></i>&nbsp;
           <span>搜索附近的商家商品</span>
       </div>
       <!-- 主体内容 -->
       <div class="ctgMain">
            <!-- 主体左边内容 -->
            <div class="ctgLeft">
                <ul class="ctgname">
                    <li @click="getCtgList(ctglist.id)" v-for="(ctglist,index) in ctglists" :key="index">
                        {{ctglist.ctgName}}
                    </li>
                    <li></li>
                </ul>
            </div>
             <!-- 主体右边内容 -->
            <div class="ctgRight">
                <ul class="ctgRightBox">
                    <li v-for="(ctglist1,index1) in ctglists1" :key="index1" class="ctgtitles">
                        <p class="ctgTitles">{{ctglist1.ctgtitle}}</p>
                        <ul class="ctgsBox">
                            <li v-for="(ctglist2,index2) in ctglists2" :key="index2" class="ctgsContent">
                                <img :src="apiUrl+'/'+ctglist2.ctgimg" alt="">
                                <p>{{ctglist2.ctgsname}}</p>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
       </div>
        <!-- 下面导航栏 -->
        <bnav active="ctg"></bnav>
    </div>
</template>
<script>
import bnav from "@/components/Bnav.vue";
export default {
  data() {
    return {
      ctglists: [],
      ctglists1: [],
      ctglists2: [],
    };
  },
  components: {
    bnav
  },
  created() {
    this.getCtgList();
  },
  methods: {
    getCtgList() {
      this.axios.get("/ctg/list").then(res => {
        if (res.data.error == 0) {
          this.ctglists = res.data.data;
          this.ctglists1 = res.data.data1;
          this.ctglists2 = res.data.data2;
        }
      });
    }
  }
};
</script>
<style>
#ctg{
    box-sizing: border-box;
    overflow-y: hidden;
}
/*搜索框的样式*/ 
.ctgSearch {
  width: 88%;
  height: 2rem;
  background-color: #f4f4f4;
  margin: 0.5rem auto;
  color: #666;
  line-height: 2rem;
  border-radius: 2rem;
  font-size: 0.85rem;
}
.ctgSearch i {
  color: #bbb;
}
/*主体的样式*/ 
.ctgMain {
  display: flex;
  height: 29.3rem;
}
/*主体左边的样式*/ 
.ctgLeft {
  width: 5rem;
  height: 100%;
}
.ctgname li {
  width: 5rem;
  height: 2.7rem;
  color:#666;
  line-height: 2.7rem;
  text-align: center;
  font-size: 0.87rem;
  background-color: #f4f4f4;
  border-bottom:0.06rem #d9d9d9 solid;
  border-left:0.06rem #d9d9d9 solid;
  border-right:0.06rem #d9d9d9 solid;
}
.ctgname li:hover{
    background-color: #fff;
    border-left: 0.18rem #47B34F solid;
    border-right:none;
    color:#47B34F;
}
/*主体右边的样式*/ 
.ctgRight {
  width: 15rem;
  height: 100%;
  overflow-y: auto;
}
.ctgTitles{
    width:13rem;
    height: 2rem;
    margin:0 auto;
    font-size: 0.87rem;
    color:#666;
}
.ctgsBox{
    width:15rem;
    height: 12.5rem;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;
}
.ctgsContent{
    height: 5.875rem;
    width:4.6rem;
    text-align: center;
    font-size: 0.75rem;
    color:#666;
}
.ctgsContent img{
    width:3.875rem;
    height: 3.875rem;
}
</style>

